import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'umi'
import { withI18n } from '@lingui/react'
import {
  Row,
  Card,
  Form,
  Input,
  Button,
  Col,
  Table,
  Modal,
  message,
} from 'antd'
import Pagination from '@/utils/Pagination'
import { layout, success } from '@/utils/helper'
import styles from './index.less'
import { post, get, Delete } from '@/services/https'
import { Unite } from '@/utils/Unite'
const confirm = Modal.confirm
@withI18n()
class Command extends React.Component {
  formRef = React.createRef()
  state = {
    keys: [],
    setIsModalVisible: false, //弹框
    from: {},
    total: 0, //总页数
    current: 1,
    pageSize: 10,
    user_name: '',
    dataSource: [],
    selectId: [],
  }

  //初始化时自调用一次，用于请求借口数据
  componentDidMount() {
    this.onChangeCurPageOrPageSize(1, 10)
  }
  onAddgt = () => {
    this.props.history.push('/SystemM/userName/0')
  }
  handleMenuClick = (status) => {}
  getData = (current, pageSize) => {
    let data = {
      ...this.state.from,
      page_index: current,
      page_size: pageSize,
    }
    post('ops/list', data).then((res) => {
      this.setState({ dataSource: res.data, total: res.size })
    })
  }

  handleDel = () => {
    post('ops/delete', this.state.selectId).then((res) => {
      const { location, i18n } = this.props
      if (res.code === 0) {
        message.success(i18n.t`Deleds`)
        this.onChangeCurPageOrPageSize(1, 10)
      } else {
        message.error(res.info)
      }
    })
  }
  searchBtn = (e) => {
    e && e.preventDefault()
    this.onChangeCurPageOrPageSize(1, this.state.pageSize)
  }

  handleReset = () => {
    this.setState({ from: {} })
    this.formRef.current.resetFields()
    let that = this
    setTimeout(function () {
      that.getData(1, 10)
    }, 500) //延时10秒
  }
  onChangeCurPageOrPageSize = (current, pageSize) => {
    this.setState(
      () => ({ current, pageSize }),
      () => {
        this.getData(current, pageSize)
      }
    )
  }
  showConfirm = () => {
    let that = this
    const { location, i18n } = this.props
    confirm({
      title: i18n.t`Are-delete`,
      content: i18n.t`reversible`,
      onOk() {
        that.handleDel()
      },
    })
  }
  handsearch = (values) => {
    this.setState({ from: values })
    this.getData(1, 10)
  }
  handleChange = (event) => {
    this.setState({ user_name: event.target.value })
  }
  render() {
    const { i18n } = this.props
    const { dataSource, selectId, account_type } = this.state
    const columns = [
      {
        title: '管理员名称',
        dataIndex: 'login_name',
        key: 'login_name',
        width: 170,
        align: 'center',
        render: (text, record) => {
          return <Link to={`/SystemM/userName/${record.id}`}>{text}</Link>
        },
      },
      {
        title: '角色',
        width: 120,
        dataIndex: 'ops_type',
        key: 'ops_type',
        render: (text, record) => {
          if (text == 1) {
            return '超级管理员'
          } else {
            return '普通管理员'
          }
        },
      },
      {
        title: i18n.t`Account-describe`,
        width: 170,
        dataIndex: 'ops_desc',
        key: 'ops_desc',
        align: 'center',
      },
    ]

    let rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({ selectId: selectedRowKeys })
      },
      getCheckboxProps: (record) => ({
        disabled: record.id === 1,
      }),
    }
    return (
      <div>
        <Card className={styles.Po_bt}>
          <Form {...layout} ref={this.formRef} onFinish={this.handsearch}>
            <Row>
              <Col span={5}>
                <Form.Item
                  className={styles.antBut}
                  label="管理员名称"
                  name="login_name"
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={19} className="flex_end">
                <Button className={styles.Po_Le} onClick={this.handleReset}>
                  {i18n.t`Reset`}
                </Button>
                <Button
                  type="primary"
                  htmlType="submit"
                  style={{ marginLeft: '12px' }}
                >
                  {i18n.t`Search`}
                </Button>
              </Col>
            </Row>
          </Form>
        </Card>
        <Card>
          <Row>
            <div className="add">
              <Button type="primary" onClick={this.onAddgt}>
                {i18n.t`add`}
              </Button>
              <Button
                type="default"
                onClick={this.showConfirm}
                style={{ marginLeft: '12px' }}
                disabled={selectId.length > 0 ? false : true}
              >
                {i18n.t`Delent`}
              </Button>
            </div>
            <Table
              rowClassName={(record, i) => (i % 2 === 1 ? 'even' : 'odd')}
              rowKey="id"
              rowSelection={rowSelection}
              style={{ width: '100%' }}
              bordered
              dataSource={dataSource}
              columns={columns}
              pagination={false}
            />

            <Pagination
              current={this.state.current}
              pageSize={this.state.pageSize}
              total={this.state.total}
              handleChange={this.onChangeCurPageOrPageSize} //当前页及条数改变都会从子组件触发此方法，用于传递页码和条数
              pageSizeOptions={['10']} // 针对不同的组件需求传递每次多少条，不传已在分页组件写默认值了
            ></Pagination>
          </Row>
        </Card>
      </div>
    )
  }
}
Command.propTypes = {
  post: PropTypes.object,
  // loading: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
}
export default Command
